import React, { Component } from 'react';
import { Row,Col } from 'antd';
import 'antd/dist/antd.css';
import Header from '../../common/header';
import Footer from '../../common/footer';
import SideMenu from './sideMenu'
import SideContent from './sideContent';
import { getHotSingerData,getCatSingerData } from '../../api';
import Pagination from "antd/es/pagination";

class DiscoverArtists extends Component {

    constructor(props){
      super(props);
      this.state={
        loading:false,
          flag:false,
          total:0,
          current:1,
      }
    }

  componentDidMount(){

    //获取热门歌手数据
    getHotSingerData(1).then( (res)=>{
      try{
        if(res.data.code === 200) {
          this.props.hotSingerDataFunc(res.data)
        }
        console.log(this.props.hotSingerData.artists)
      }catch(err){
        console.log("错误为:"+err)
      }
       } )
  }

  handleClick=(router,dataPath,type)=>{
    console.log(dataPath);console.log(router)
    this.props.history.push(router)
    this.type=type;
    //获取cat路径的数据
      this.id = dataPath.replace("/artist/list?cat=","");
      console.log(this.id)
      let index=this.props.location.search.indexOf('offset')
      let x=this.props.location.search.substring(index+8,17)
      console.log(x)
    getCatSingerData(this.id,false,1).then( (res)=>{
    try{
      if(res.data.code === 200) {
        this.props.catSingerDataFunc(res.data)
          this.setState({
              flag:true,
              total:res.data.artistTotal,
              current:x,

          })
      }
    }catch(err){
      console.log("错误为:"+err)
    }
    } )
  }

  //根据字母跳转路径
  handleClickCat=(alpha)=>{
    if(alpha==='热门') {
      alpha=''
    }
    this.id = this.props.location.search.match(/\?id=\d+/gi)[0].slice(4);
    console.log(this.id)
    this.props.history.push(`/discover/artist/cat?id=${this.id}&&initial=${alpha}&&offset=1`)
      let index=this.props.location.search.indexOf('offset')
      let x=this.props.location.search.substring(index+8,17)
      console.log(x)
    getCatSingerData(this.id,alpha,1).then( (res)=>{
      try{
        if(res.data.code === 200) {
          this.props.catSingerDataFunc(res.data)
            console.log(res.data)
            this.setState({
                flag:false,
                total:res.data.artistTotal,
                current:x,
            })
        }
      }catch(err){
        console.log("错误为:"+err)
      }

      } )
  }
  // 根据页码跳转路径
    handleClickPage=(current)=>{
        getHotSingerData(current).then( (res)=>{
            try{
                if(res.data.code === 200) {
                    this.props.hotSingerDataFunc(res.data)
                }
            }catch(err){
                console.log("错误为:"+err)
            }
        } )
        this.id=this.props.location.search.match(/\?id=\d+/gi)[0].slice(4);
        let index=this.props.location.search.indexOf('&&')
        this.alpha=this.props.location.search.substring(index+11,18)
        if(this.alpha){
            this.props.history.push(`/discover/artist/cat?id=${this.id}&&initial=${this.alpha}&&offset=${current}`)
        }
        else {
            this.props.history.push(`/discover/artist/cat?id=${this.id}&&offset=${current}`)
        }
        getCatSingerData(this.id,this.alpha,current).then((res)=>{
            try{
                if(res.data.code === 200) {

                    this.props.catSingerDataFunc(res.data)
                    console.log(res.data)
                    this.setState({
                        flag:false,
                        total:res.data.artistTotal
                    })
                }
            }catch(err){
                console.log("错误为:"+err)
            }

        })
    }

  render() {

    return (
      <div className='discover-artists'>
        <div style={{ backgroundColor:"#242400",color:"#fff",position:"fixed",zIndex:10,top:"0",width:"100%" }}>
             <Header/>
        </div>
        <div className='discover-artists-content' style={{ marginTop:"10vh",backgroundColor:"#fff", }}>
            <Row>
                <Col span={4}></Col>
                <Col span={16} style={{ paddingBottom:"30px" }}>
                    <Row>
                        <Col span={5}>
                            <SideMenu handleClick={(router,dataPath,type)=>this.handleClick(router,dataPath,type)}  />
                        </Col>
                        <Col span={19}>
                          <Row>
                              <SideContent
                                  //推荐歌手数据
                                  hotSingerData={this.props.hotSingerData}
                                  //cat路径数据
                                  type={this.type}
                                  catSingerData={this.props.catSingerData}
                                  handleClickCat={(alpha)=>this.handleClickCat(alpha)}
                                  flag={this.state.flag}
                              />
                          </Row>
                           <div>
                               <Pagination  onChange={(current)=>this.handleClickPage(current)} position={'bottom'}  defaultPageSize={20} defaultCurrent={1} total={this.state.total} style={{ marginLeft:"200px"}}/>
                           </div>
                        </Col>
                    </Row>
                </Col>
                <Col span={4}></Col>
            </Row>
        </div>
        <div className='discover-artists-footer'>
            <Footer />
        </div>
      </div>
    )
  }
}

export default DiscoverArtists

